<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>合同附件表</span></div>
    <div class="container">
      <div class="content">
        <div class="nav">
          <ul class="left">
            <li
              v-for="(item, index) of contractList"
              :key="index"
              :class="['hoverShow', { clickShow: tabIndex == index }]"
              @click="changeNavType(index, item.id)"
              :title="item.contractNumber + '/' + item.contractName"
            >
              <span v-if="index == 0">主合同</span>
              <span v-if="index != 0">补充协议{{ index }}</span>
            </li>
          </ul>
          <!-- <span><a-icon type="sync" /></span> -->
        </div>
        <div class="table-box">
          <div class="btn-box"  style="display:flex;padding:10px 0px;">
            <!-- <a-button class="hte-btn add-btn" type="primary">插入</a-button>
            <a-button class="hte-btn add-btn" type="primary">上传</a-button> -->
            <a-button class="hte-btn add-btn" type="primary" @click="downloadContractAttach">下载</a-button>
          </div>
          <a-table
            class="hte-table-content"
            :columns="columns"
            :data-source="attachList"
            :loading="tabLoading"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            size="middle"
            rowKey="id"
            :pagination="false"
          >
            <template slot="fileName" slot-scope="text, record">
              {{ record.bidFile.fileName + '.' + record.bidFile.fileType }}
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/config/upload.install.js'
import { getAction } from '@/api/manage'

export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractFileList',
        badgecount: '',
      },
      contractId: this.$route.params && this.$route.params.id,
      contractList: [],
      attachList: [],
      tabIndex: 0, //数据类型：0-待审批，1-已处理，2-我发起的
      tabLoading: false,
      url: {
        loadPurchaseContract: '/hte/contract/loadPurchaseContract',
        loadContractAttach: '/hte/contract/loadContractAttach',
      },
      columns: [
        {
          title: '所属附件名称',
          dataIndex: 'formName',
          key: 'formName',
        },
        {
          title: '文件名称',
          scopedSlots: { customRender: 'fileName' },
        },
        {
          title: '上传人',
          dataIndex: 'modifyUser',
          key: 'modifyUser',
        },
        ,
        {
          title: '上传时间',
          dataIndex: 'modifyTime',
          key: 'modifyTime',
        },
      ],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  mounted() {
    this.loadContract()
    this.loadAttach(this.contractId)
  },
  methods: {
    loadContract() {
      this.tabLoading = true
      getAction(this.url.loadPurchaseContract + '/' + this.contractId, {})
        .then((res) => {
          this.tabLoading = false
          if (res.code == 200) {
            this.contractList = res.result
            if (this.contractList && this.contractList.length > 0) {
            }
          } else {
            this.$message.warning('加载数据异常：' + res.message)
          }
        })
        .catch((e) => {
          this.tabLoading = false
          this.$message.warning('加载数据失败:' + e.message)
        })
    },
    loadAttach(contractId) {
      this.tabLoading = true
      getAction(this.url.loadContractAttach + '/' + contractId, {})
        .then((res) => {
          this.tabLoading = false
          if (res.code == 200) {
            this.attachList = res.result
          } else {
            this.$message.warning('加载数据异常：' + res.message)
          }
        })
        .catch((e) => {
          this.tabLoading = false
          this.$message.warning('加载数据失败:' + e.message)
        })
    },
    changeNavType(index, contractId) {
      this.tabIndex = index
      this.loadAttach(contractId)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    downloadContractAttach() {
      if (this.selectedRows && this.selectedRows.length > 0) {
        let url = process.env.VUE_APP_PS_API_BASE_URL
        if (this.selectedRows.length == 1 && this.selectedRows[0].bidFile.filePath) {
          url += '/hte/contract/download/' + this.selectedRows[0].bidFile.id
          window.open(url)
        } else {
          let ids = []
          this.selectedRows.forEach((row) => {
            if (row.bidFile.filePath) {
              ids.push(row.bidFile.id)
            }
          })
          if (ids.length > 0) {
            url += '/hte/contract/downloadZip?ids=' + ids.join(',') + '&contractId=' + this.contractId
            window.open(url)
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .banner {
    background-image: url(~@assets/contract-top.png);
  }
  .container {
    position: relative;    
    .nav {
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 0 26px;
      .left {
        padding: 0;
        margin: 0;
        li {
          padding: 20px;
          font-size: 16px;
          color: #333;
          &.clickShow {
            border-bottom: 2px solid #1890ff;
            cursor: pointer;
          }
        }
      }
      > span {
        cursor: pointer;
        margin-right: 26px;
      }
    }
  }
}
</style>
